<template  #header>
  <el-tabs type="border-card" v-model="activeName" :before-leave="changeTab">
    <el-tab-pane label="订单信息" name="orderManage">
      <template>
        <div class="card-header">
          <span>订单-概览</span>
        </div>
      </template>
      <el-row :gutter="10">
         <el-input placeholder="搜索编号或客户名称"  style="width: 150px;margin-right:10px;" size="small"   v-model="searchContent" ></el-input>
         <el-select v-model="orderStatus" clearable  size="small" placeholder="订单状态" style="margin-right:10px;"  >
          <el-option
            v-for="item in orderStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

       
          <el-button size="small" type="primary" @click="handlerSearch">搜索</el-button>
        
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        row-key="id"
        @row-dblclick="showOrderDetail"
        @current-change="currentRowSelect"
       
      >
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="customerName" label="客户名称" />
      
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <el-tag v-if="scope.row.orderStatus == 0">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.orderStatus == 1">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="success" v-else-if="scope.row.orderStatus == 2">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="danger" v-else>{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" > <template #default="scope">{{orderTypeList[scope.row.orderType].label}}</template></el-table-column>
         <el-table-column prop="businessName" label="业务员" />
          <el-table-column prop="orderDate" label="下单日期" />
        <el-table-column prop="reviewerName" label="审核人" width="150">
            <template #default="scope">
              {{scope.row.reviewerName}}
            </template>
          </el-table-column>
        <el-table-column prop="orderVerify" label="审核日期" />
        <el-table-column prop="deposit" label="定金" />
        <!-- <el-table-column prop="depositer" label="定金收款人" /> -->
         <el-table-column prop="sumPrice" label="税价合计" />
            <!-- <el-table-column prop="deliveryType" label="发货方式" />
        <el-table-column prop="logistics" label="物流/快递编号" />
         <el-table-column prop="installer" label="安装人员" /> -->
        <el-table-column prop="createDate" label="创建时间" /> 
        <el-table-column label="操作" width="105"  >
          <template #default="scope" >
             <el-button
              size="mini"
              @click="showOrder(scope.$index, scope.row)"
              type="primary" >详情</el-button> 

              
           </template>
           </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 10px"
        :currentPage="currentPage"
        :page-size="10"
        :page-sizes="[10, 20, 100, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
  
     
    </el-tab-pane>

    <el-tab-pane label="订单细项" name="orderDetailManage">
     
     
       <el-table :data="orderDetailData"  highlight-current-row
        row-key="id" style="width: 100%">
        <el-table-column prop="product.name" label="订购商品" />
        <el-table-column prop="product.code" label="订购商品" />
        <el-table-column prop="product.unitName" label="订购商品" />
         <el-table-column prop="orderCount" label="订购数量" />
         <!-- <el-table-column prop="actualCount" label="出货数量" /> -->
        <el-table-column prop="price" label="单价" />
         <el-table-column prop="amountPrice" label="金额" />
         <!-- <el-table-column prop="shipper" label="出货人" />
         <el-table-column prop="shipperTime" label="出货时间" /> -->
        
      </el-table>  
     
    </el-tab-pane>

    <el-tab-pane label="详情" name="orderAuditingManage">
        <el-card>
        <el-timeline>
          <el-timeline-item
            :timestamp="auditing.createDate"
            v-for="(auditing, index) in auditingData"
            :key="index"
            placement="top"
          >
            <el-card>
              <p
                style="
                  display: block;
                  float: left;
                  height: 30px;
                  line-height: 30px;
                  margin-bottom: 20px;
                "
              >
                <el-tag v-if="auditing.orderStatus == 0">{{
                  orderStatusList[auditing.orderStatus].label
                }}</el-tag>
                <el-tag type="warning" v-else-if="auditing.orderStatus == 1">{{
                  orderStatusList[auditing.orderStatus].label
                }}</el-tag>
                <el-tag type="success" v-else-if="auditing.orderStatus == 2">{{
                  orderStatusList[auditing.orderStatus].label
                }}</el-tag>
                <el-tag type="danger" v-else>{{
                  orderStatusList[auditing.orderStatus].label
                }}</el-tag>
                {{auditing.opinion}}
              </p>
               <p
                style="
                  display: block;
                  float: right;
                  height: 30px;
                  line-height: 30px;
                  margin-bottom: 20px;
                "
              >{{auditing.adminName}}</p>

              
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

    </el-tab-pane>

  </el-tabs>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
 
import {
 
 
  getRequest,
  
} from "../../utils/api";
import { ElMessage  } from "element-plus";
 



export default {
  name: "OrderListAll",
  components: {
    
},

  setup(props, { emit }) {
    const baseUrl = "/order/basic/all";
    const state = reactive({
      
      orderStatus:'',
      orderStatusList: [
        {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        {value: 4,label: "制单"},
        {value: 5,label: "已发货"},
        {value: 6,label: "安装调试完毕"},
        {value:7,label: "待收尾款"},
         {value:8,label: "订单完成"}
        
      ],orderTypeList:[ {value: 0,label: "直销"},
        {value: 1,label: "维修"},
        {value: 2,label: "调换"},
         {value: 3,label: "补发"}],
      searchContent: "",
      tableData: [],
      orderDetailData: [],
      auditingData:[],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      activeName: "orderManage",
      orderInfo:{
          customerInfo:{name:'',phone:"",address:''},
          orderType:0
      } 
    });



  const loadData = () => {

    var params={
      page:state.currentPage,
      limit:state.pageSize,
      keywords:state.searchContent,
      orderStatus: state.orderStatus
    }
      getRequest(state.baseUrl,params).then(response => {
          if (response) {
           state.tableData = response.page.list;
           state.total = response.page.totalCount ;
          }
        })
  }
    const showOrderDetail = (row, column, event) => {
      state.activeName = "orderDetailManage";
      state.id = row.id;
      state.orderInfo = row ;
      
    };
  //加载订单细项数据
    const loadOrderDetailData = () => {
      getRequest("/order/basic/detail/", { id: state.id }).then(
        (response) => {
          if (response) {
            state.orderDetailData = response.data;
          }
        }
      );
    };
    const currentChange = (pageNo) => {
      state.currentPage = pageNo;
      loadData();
      state.orderDetailData=[];
      state.id='';
    };

    const currentRowSelect = (currentRow, oldCurrentRow) => {
        state.id = currentRow.id;
        state.orderInfo = currentRow ;
    };

    const changeTab = (activeName, oldActiveName) => {
      return new Promise((resolve, reject) => {
        if (activeName == "orderDetailManage") {
          if (state.id) {
            loadOrderDetailData();
            return resolve();
          } else {
            ElMessage.error("请选中某一行订单信息！");
            return reject();
          }
        }else if(activeName == "orderAuditingManage"){
            if (state.id) {
            loadAuditingData();

            return resolve();
          } else {
            ElMessage.error("请选中某一行订单信息！");
            return reject();
          }
          
        }
        else{
            return resolve();
        }
       
      });
    };
 
 const handleSizeChange=(newSize)=>{
      state.pageSize = newSize ;
      loadData();
    }

const handleCurrentChange=(newPage)=>{
      state.currentPage = newPage ;
      loadData();
    }

 const handlerSearch=()=>{
      state.currentPage=1 ;
      loadData() ;
    }
    const showOrder=(index ,currentRow)=>{
        state.id = currentRow.id ;
       state.activeName = "orderAuditingManage";
    }
    const loadAuditingData = ()=>{
      getRequest("/order/basic/auditing/", { id: state.id }).then(
        (response) => {
          if (response) {
            state.auditingData = response.data;
          }
        }
      );
    }
    onMounted(() => {
     loadData();
    });
    return {
     handleSizeChange,handleCurrentChange,handlerSearch,
 
      ...toRefs(state), //解构响应式数据
      currentChange,
      currentRowSelect,
      changeTab,
      showOrderDetail,
      showOrder
    };
  },
};
</script>
<style scoped>
table.dataintable {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}

table.dataintable th {
  vertical-align:baseline;
  padding:5px 0px;
 
  border:1px solid #3F3F3F;
  text-align:center;
  color:#3F3F3F;
}

table.dataintable td {
  vertical-align:text-top;
  padding:5px 0px;
   text-align:center;
  border:1px solid #aaa;
}

table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
  background-color:#fff;
}


 
</style>